<template>
    <view>
        <van-field :placeholder="placeholder" :size="size" :label="title" :value="name" :is-link="isLink" :input-align="inputAlign" readonly  @tap="openActionSheet">
            <view slot="left-icon">
                <slot name="icon"></slot>
            </view>
        </van-field>
        <van-action-sheet
            :show="visible"
            :z-index="zIndex"
            :actions="sheet_list"
            :close-on-click-overlay="true"
            @click-overlay="visible = false"
            @select="selectSheet"
            />
    </view>
</template>
<script>
export default {
    props:{
        isLink: {
            type: Boolean,
            default: () => {return true}
        },
        inputAlign:{
            type: String,
            default: () => 'left'
        },
        title: {
            type: String,
        },
        value: {
            type: String || Number
        },
        list: {
            type: Array
        },
        zIndex: {
            type: Number,
            default: () => 100,
        },
        placeholder: {
            type: String,
            default: () => '请选择',
        },
        size: {
            type: String,
            default: () => 'normal'
        }
    },
    data(){
        return{
            visible: false,
            // sheet_data:{},
        }
    },
    computed:{
        sheet_list(){
            return this.list;
        },
        name:{
            get(){
                let obj = this.list.find(item => {
                    return item.id == this.value;
                });
                if(obj){
                    let res_obj = JSON.parse(JSON.stringify(obj));
                    return res_obj.name;
                }else{
                    return null;
                }
            },
            set(newVal){
                console.log(newVal);
            }
        }
    },
    methods:{
        openActionSheet(){
            if(this.sheet_list.length > 0){
                this.visible = true;
            }
        },
        selectSheet(e){
            this.name = e.detail.name;
            this.$emit('update:value', e.detail.id);
            this.$emit('confirm', e.detail);
            this.visible = false;
        },
    }
}
</script>